<!-- prettier-ignore -->
<template>
  <div v-if="settings" class="dialog-box">
    <div class="box-content setting-box" style="width: 50%">
      <div class="content-header">
        <span>设置</span>
        <i class="el-icon-close" @click="$emit('cancel')"></i>
      </div>
      <div class="content-body">
        <div class="form-item-box">
          <el-row :gutter="16" type="flex">
            <el-col :span="8">
              <el-tree :data="setTree" :default-expand-all="true" :expand-on-click-node="false"
                       :highlight-current="true"
                       class="dark-tree" @node-click="treeClick">
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span
                    :style="node.level === 1?{fontSize:'25px'}:node.level === 2 ? {fontSize: '20px'}:{fontSize: '14px'}">{{
                    node.label
                  }}</span>
              </span>
              </el-tree>
            </el-col>
            <el-col :span="16">
              <div class="setting-content">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item v-for="(item) in crumbList" :key="item.id">{{ item.label }}</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="other-menu">
                  <div v-for="(item,index) in setLabelList" :key="index" class="menu-box">
                    <el-link type="primary">{{ item.label }}</el-link>
                  </div>
                </div>
                <div class="component-set">
                  <keep-alive>
                    <Component :is="currentComponent" :settings.sync="settings"></Component>
                  </keep-alive>
                </div>
              </div>
              <div class="operation-button">
                <el-button class="grey-hover-grey-button" @click="$emit('cancel')">取 消</el-button>
                <el-button type="primary" @click="setConfirm">确 定</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const fs = window.require("fs");
const {ipcRenderer} = window.require('electron');
import baseMapSet from "./components/baseMapSet.vue";
import defaultSettings from './defaultSettings';

export default {
  name: "index",
  components: {
    baseMapSet,
  },
  data() {
    return {
      setTree: [
        {
          label: "所有设置",
          children: [
            {
              label: "工程",
              children: [
                {
                  label: "底图设置",
                  component: baseMapSet
                },
              ],
            },
          ],
        },
      ],
      crumbList: [],
      setLabelList: [], // 用于存放不是最底层级的菜单
      currentComponent: null,
      settings: null,
    };
  },
  methods: {
    setConfirm() {
      ipcRenderer.send('electron-store:set', this.settings)
      ipcRenderer.once('electron-store:set', (event, data) => {
        if (data.type === 'success') {
          this.$confirm('设置修改成功，重启后生效,是否重启？', '是否重启', {
            confirmButtonText: '重 启',
            cancelButtonText: '取 消',
            type: 'warning'
          }).then(() => {
            ipcRenderer.send('restart-app')
          })
        } else {
          this.$message({
            type: data.type,
            message: data.msg
          })
        }
      })
    },
    treeClick(data, node) {
      this.crumbList = this.getCrumbByTree(node);
      this.setLabelList = data.children;
      data.component
          ? (this.currentComponent = data.component)
          : (this.currentComponent = null);
    },
    // 从node中获取到面包屑
    getCrumbByTree(node, container = []) {
      if (node.label) {
        container.unshift({
          id: this.$guid(),
          label: node.label,
        });
        if (node.parent) {
          container = this.getCrumbByTree(node.parent, container);
        }
      }
      return container;
    },
  },

  async created() {
    this.settings = window.appSettings
        ? window.appSettings
        : defaultSettings
  },
};
</script>

<style lang="less" scoped>
.setting-box {
  .dark-tree {
    background: rgba(0, 0, 0, 0);
    color: #fff;

    /deep/ .el-tree-node__content:hover,
    .el-upload-list__item:hover {
      background-color: #8fa1c7;
    }

    /deep/ .el-tree-node:focus > .el-tree-node__content {
      background-color: #4b5f85;
    }

    /deep/ .el-tree-node.is-current > .el-tree-node__content {
      background-color: #4b5f85 !important;
    }
  }

  .setting-content {
    width: 100%;
    min-height: 200px;
    border: 1px solid #459bec;
    border-radius: 6px;
    background: #173147cc;
    box-sizing: border-box;
    padding: 10px;

    /deep/ .el-breadcrumb__inner {
      color: #fff;
    }

    .other-menu {
      margin-top: 10px;
      margin-left: 10px;

      .menu-box {
        padding: 5px 0;
      }
    }

    .component-set {
    }
  }

  .operation-button {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
}
</style>
